<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>children 属性</title>
</head>
<body>
<div id="app">
    <p></p>
    <span></span></div>
</body>
<script>
    /** 1.专有拓展的定义：尽管所有浏览器厂商都理解遵循标准的重要性，但它们也都有为弥补功能缺失而为 DOM 添加专有扩展的历史。虽然这表面上看是一件坏事，但专有扩展也
     *    为开发者提供了很多重要功能，而这些功能后来则有可能被标准化，比如进入 HTML5。除了已经标准化的，各家浏览器还有很多未被标准化的专有扩展。这并不意味着它们将
     *    来不会被纳入标准，只不过在本书编写时，它们还只是由部分浏览器专有和采用。
     * **/

    /** 2.children 属性：是一个 HTMLCollection，只包含元素的 Element 类型的子节点。如果元素的子节点类型全部是元素类型，那 children 和 childNodes
     *    中包含的节点应该是一样的。
     * **/
    let element = document.getElementById('app');
    let childCount = element.children.length;
    let firstChild = element.children[0];
    console.log(childCount);//2
    console.log(firstChild);//p
</script>
</html>